<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		.view {
			width: 560px;
			height: 300px;
			margin: 100px auto;
			border: 1px solid #ccc;

			position: relative;
		}

		li {
			width: 112px;
			height: 300px;
			position: relative;

			float: left;

			transform-style: preserve-3d;

			/*transform: rotateX(-30deg);*/

			transition: all 1s linear;
		}

		li span {
			position: absolute;
			width: 100%;
			height: 100%;

			text-align: center;
			line-height: 300px;
			font-size: 30px;
		}

		li span:nth-child(1) {
			/*background-color: pink;*/
			background-image: url(./images/1.jpg);

			transform: translateZ(150px);
		}

		li span:nth-child(2) {
			/*background-color: yellow;*/

			background-image: url(./images/2.jpg);
			transform: rotateX(90deg) translateZ(150px);
		}

		li span:nth-child(3) {
			/*background-color: green;*/

			background-image: url(./images/3.jpg);

			transform: rotateX(180deg) translateZ(150px);
		}

		li span:nth-child(4) {
			/*background-color: blue;*/

			background-image: url(./images/4.jpg);

			transform: rotateX(270deg) translateZ(150px);
		}

		li:nth-child(2) span {
			background-position: -112px 0;
		}

		li:nth-child(3) span {
			background-position: -224px 0;
		}

		li:nth-child(4) span {
			background-position: -336px 0;
		}

		li:nth-child(5) span {
			background-position: -448px 0;
		}


		/*按钮*/
		.prev, .next {
			display: block;
			width: 60px;
			height: 60px;
			text-align: center;
			line-height: 60px;
			margin-top: -30px;
			font-size: 40px;
			color: #FFF;
			text-decoration: none;
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			top: 50%;
		}

		.next {
			right: 0;
		}
	</style>
</head>
<body>
	<div class="view">
		<ul>
			<li>
				<span>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
			</li>
			<li>
				<span>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
			</li>
			<li>
				<span>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
			</li>
			<li>
				<span>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
			</li>
			<li>
				<span>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
			</li>
		</ul>
		<a href="javascript:;" class="prev">&lt;</a>
		<a href="javascript:;" class="next">&gt;</a>
	</div>
	<script src="./js/jquery.min.js"></script>
	<script>

		// $('.prev').click();

		var count = 0;
		var lock = false;

		// 绑订事件
		$('.prev').on('click', function () {
			// code

			if(lock) {
				return;
			}

			lock = true;

			count++;

			// $('li').css({
			// 	transform: 'rotateX(' + count * 90 + 'deg)'
			// });

			$('li').each(function (k, v) {
				console.log(k);

				$(this).css({
					'transition-delay': k * 0.25 + 's',
					transform: 'rotateX(' + count * 90 + 'deg)'
				});
			});
		});

		$('.next').on('click', function () {
			// code

			if(lock) {
				return;
			}

			lock = true;

			count--;

			// $('li').css({
			// 	transform: 'rotateX(' + count * 90 + 'deg)'
			// });

			$('li').each(function (k, v) {
				console.log(k);

				$(this).css({
					'transition-delay': k * 0.25 + 's',
					transform: 'rotateX(' + count * 90 + 'deg)'
				});
			});
		});

		var lis = document.querySelector('li:last-child');

		lis.addEventListener('webkitTransitionEnd', function () {
			// alert(1);

			lock = false;
		});
	</script>
</body>
</html>